<template>
    <div class="feedback-list-page">
        <el-card shadow="never" class="mt-4">
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column align="center" width="70" label="ID" prop="id" />
                    <el-table-column align="center" label="反馈人名称" prop="name" />
                    <el-table-column align="center" label="反馈人企业" prop="company" />
                    <el-table-column align="center" label="反馈内容">
                        <template slot-scope="{row}">
                            <div class="text-left">
                                <span>{{ row.isMore ? row.text : row.content }}</span>
                                <div class="more-btn" v-show="row.content.length > 64">
                                    <el-button type="text" @click="onClickMore(row)">
                                        <span>{{ row.isMore ? '展开' : '收起' }}</span>
                                    </el-button>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="反馈图片" prop="description">
                        <template slot-scope="{row}">
                            <el-button
                            type="text"
                            @click="onClickImage(row)"
                            v-if="row.media">查看图片</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="反馈时间" prop="description">
                        <template slot-scope="{row}">{{ timeFormat(row.created_at) }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                v-if="row.status === 2"
                                type="text"
                                @click="onDeleteClick(row)"
                                class="red-color"
                            >取消受理</el-button>
                            <el-button v-else type="text" @click="onDeleteClick(row)">受理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <pagination
                    ref="pagination"
                    :currentPage="form.page"
                    :pageSize="form.size"
                    :handleCurrentChange="onPageChange"
                    :handlePageSizeChange="onPageChange"
                    :totalElements="totalElements"
                ></pagination>
            </div>
        </el-card>
        <!-- 查看图片 -->
        <el-dialog title="反馈图片" :visible.sync="isShow" width="680px">
            <el-image
                class="logo"
                v-for="(item,index) in images"
                :preview-src-list="images"
                :key="index"
                :src="item"
            ></el-image>
            <div class="dialog-txt" v-show="!images.length">暂无反馈图片</div>
        </el-dialog>
    </div>
</template>

<script>
import { Image } from 'element-ui';
import Pagination from '@/components/base/Pagination';
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
        Pagination,
        ElImage: Image,
    },
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 10,
            },
            totalElements: 0,
            isShow: false,
            images: [],
        };
    },
    methods: {
        strlen(str) {
            let len = 0;
            for (let i = 0; i < str.length; i++) {
                const c = str.charCodeAt(i);
                if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) len++;
                else len += 2;
            }
            return len;
        },
        onClickMore(row) {
            row.isMore = !row.isMore;
        },
        onClickImage(row) {
            if (row.media) {
                this.images = [];
                this.isShow = true;
                this.images = JSON.parse(row.media);
            }
        },
        onPageChange(val, text) {
            if (text) {
                this.form.size = val;
                this.form.page = 1;
            } else {
                this.form.page = val;
            }
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('feedback', { params: this.form }).then((res) => {
                res.content.forEach(item => {
                    const content = item.content;
                    item.text = this.strlen(content) > 64 ? `${content.substring(0, 64)}......` : content;
                    item.isMore = this.strlen(content) > 64;
                });
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },
        onDeleteClick(row) {
            const text = row.status === 1 ? '受理' : '取消受理';
            const status = row.status === 1 ? 2 : 1;
            $ele.$confirm(`是否${text}该反馈`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.put(`feedback/${row.id}/${status}`).then(() => {
                    $ele.$message.success('操作成功');
                    this.fetchData();
                }).finally(() => this.loading = false);
            }).catch(() => { });
        },
        timeFormat(time) {
            return time ? new TimeFormats().convertTime('', time) : '';
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.feedback-list-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }
    .logo {
        width: 150px;
        height: 150px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .dialog-txt {
        text-align: center;
    }
    .more-btn {
        float: right;
    }
}
</style>
